import React from 'react';
import { Toast, Icon, WhiteSpace, Button, WingBlank, List, Flex } from 'antd-mobile';
import _ from 'lodash';
import { fetchVipAcc } from '../../services/vipService';
import styles from './CardSelector.less';

class CardSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectIndex: -1,
      vipAcc: {},
    };
  }

  componentDidMount() {
    const { vips = [], shopId } = this.props;
    if (vips && vips.length) {
      vips.forEach(vip => {
        fetchVipAcc(shopId, vip.card_no).then((result) => {
          if (_.isNil(result.data) || _.isEmpty(result.data)) return;
          const vipAcc = { ...this.state.vipAcc };
          vipAcc[vip.card_no] = result.data;
          this.setState({
            vipAcc,
          });
        });
      });
    }
  }

  onSel = (index) => {
    this.setState({
      selectIndex: index,
    });
  };

  onSubmit = () => {
    if (this.props.onSelect) {
      this.props.onSelect(this.state.selectIndex);
    }
  };

  onCancel = () => {
    if (this.props.onSelect) {
      this.props.onSelect();
    }
  };

  render() {
    const { vips = [] } = this.props;
    const { selectIndex } = this.state;

    return (
      <div className={styles.body}>
        <List className={styles.cardList} renderHeader={() => `请选择需要绑定的会员卡:`}>

          {vips.map((card, index) => {
            let itemClass = `${styles.cardItem}`;
            let cardClass = `${styles.card}`;
            if (selectIndex >= 0) {
              if (index === selectIndex) {
                cardClass += ' selected-card';
                itemClass += ' selected-item';
              } else {
                cardClass += ' unselected-card';
                itemClass += ' unselected-item';
              }
            }
            const cardNo = card.card_no;
            let remainAcc = '-';
            if (this.state.vipAcc[cardNo]) {
              remainAcc = this.state.vipAcc[cardNo].remain_acc;
            }
            return (
              <WingBlank key={index} className={itemClass}>
              <List.Item onClick={() => { this.onSel(index); }}>
                <div className={cardClass}>
                    <div className={styles.cardTitle}>{_.isNil(card.vip_level) ? '电子会员卡' : '会员等级：' + card.vip_level }</div>
                  <div className={styles.cardNo}>卡号: {card.card_no}</div>
                  <div className={`${styles.accList} acc-list`}>
                    <div className={styles.accText}>
                      积分
                </div >
                    <div className={styles.accNum}>
                      {remainAcc}
                </div>
                  </div>
                </div>
              </List.Item>
              </WingBlank>
            );
          }) }

        </List>

        <div className={styles.footer}>
          <Button className={styles.bindBtn} disabled={selectIndex < 0} type="primary" onClick={this.onSubmit}>绑定会员卡</Button>
          <WhiteSpace size="lg"/>
          <Button className={styles.cancelBtn} type="ghost" onClick={this.onCancel}>取消</Button>
        </div>
      </div>
    );
  }
}

CardSelector.propTypes = {
  shopId: React.PropTypes.string,
  vips: React.PropTypes.array,
  onSelect: React.PropTypes.func,
  onClose: React.PropTypes.func,
};

export default CardSelector;
